<!--
 * @Description: 
 * @Author: liuzl
 * @Date: 2024-11-13 20:25:41
 * @LastEditors: liuzl
 * @LastEditTime: 2024-11-14 16:07:00
-->
<template>
  <!-- <Login v-if="flag"></Login> -->
  <!-- 分析页面布局 -->
  <!-- body或者和body一样大的div设置背景图片 -->
  <!-- 页面中间有一个div居中显示 -->
  <!-- 分析div 左中右三块布局 -->
   <div class="body">
  <div id="app">
      <!-- 左侧 -->
       <div class="divLeft">
          <p>新用户注册</p>
          <p>USER REGISTER</p>
       </div>
      <div class="divRight">
          <p>已有账号？<a href="">立即登录</a></p>
       </div>
       <!-- 中间 -->
       <div class="divCenter">
          <div class="divFrom">
              <!-- 表单元素 -->
              <from action="#" method="post">
                  <table>
                      <tr>
                          <td class="tdLeft">
                              <label class="" for="username">
                                  用户名
                              </label>
                          </td>
                          <td class="tdRight">
                              <input type="text" v-model="username" id="username" placeholder="请输入用户名">
                          </td>
                      </tr>
                      <tr>
                          <td class="tdLeft">
                              <label class="" for="password">
                                  密码
                              </label>
                          </td>
                          <td class="tdRight">
                              <input type="password" v-model="password" id="password" placeholder="请输入密码">
                          </td>
                      </tr>
                      <tr>
                          <td class="tdLeft">
                              <label class="" for="email">
                                  E-mail
                              </label>
                          </td>
                          <td class="tdRight">
                              <input type="text" v-model="email" id="email" placeholder="请输入Email">
                          </td>
                      </tr>
                      <tr>
                          <td class="tdLeft">
                              <label class="" for="name">
                                  姓名
                              </label>
                          </td>
                          <td class="tdRight">
                              <input type="text" v-model="name" id="name" placeholder="请输入真实的姓名">
                          </td>
                      </tr>
                      <tr>
                          <td class="tdLeft">
                              <label class="" for="phone">
                                  手机号
                              </label>
                          </td>
                          <td class="tdRight">
                              <input type="text" v-model="phone" id="phone" placeholder="请输入您的手机号">
                          </td>
                      </tr>
                      <tr>
                          <td class="tdLeft">
                              <label class="" for="gender">
                                  性别
                              </label>
                          </td>
                          <td class="tdRight">
                              <input type="radio" v-model="gender" id="male" value="男">男
                              <input type="radio" v-model="gender" id="female" value="女">女
                          </td>
                      </tr>
                      <tr>
                          <td class="tdLeft">
                              <label class="" for="date">
                                  出生日期
                              </label>
                          </td>
                          <td class="tdRight">
                              <input type="date" v-model="date" id="date">
                          </td>
                      </tr>
                      <tr>
                          <td class="tdLeft">
                              <label class="" for="checkCode">
                                  验证码
                              </label>
                          </td>
                          <td class="tdRight">
                              <input type="text" v-model="checkCode" id="checkCode" placeholder="请输入验证码">
                              <img id="imgCode"src="../components/img/verify_code.jpg" alt="">
                          </td>
                      </tr>
                      <tr>
                          <td @click="login" id="tdSubmit" colspan="2">
                              <input id="btnSubmit" type="submit" value="注册">
                          </td>
                      </tr>
                  </table>
              </from>
          </div>
       </div>
  </div>   
</div> 
</template>
<script setup>
import {ref} from 'vue';
const username = ref();
const password = ref();
const email = ref();
const name = ref();
const phone = ref();
const gender = ref();
const date = ref();
const checkCode = ref();

function login(){
  console.log("username:" + username.value);
console.log("password:" + password.value);
console.log("email:" + email.value);
console.log("name:" + name.value);
console.log("phone:" + phone.value);
console.log("gender:" + gender.value);
console.log("date:" + date.value);
console.log("checkCode:" + checkCode.value);
//   alert("username:" + username.value+"\n"
//     +"password:" + password.value+"\n"
//     +"email:" + email.value+"\n"
//     +"name:" + name.value+"\n"
//     +"phone:" + phone.value+"\n"
//     +"gender:" + gender.value+"\n"
//     +"date:" + date.value+"\n"
//     +"checkCode:" + checkCode.value+"\n"
// )
}
</script>
<style scoped>
 .body{
      padding-top:40px;
      background-image:url(../components/img/login_bg.png);
      background-position:center;
      background-repeat: no-repeat;
  }
  #app{
      /* border:1px solid red; */
      width:900px;
      height:600px;
      border:5px solid #eee;
      /* 让div水平居中 */
      margin:auto;
      background-color: white;
  }
  .divLeft.divCenter.divRight{
      /* border:1px solid red; */
  }
  .divLeft{
      float:left;
      width:25%;
      padding-top:20px;
      padding-left: 20px;
  }
  .divLeft>p:first-child{
      color: #ffd026;
      font-size: 20px;
  }
  .divLeft>p:last-child{
      color: #a6a6a6;
      font-size: 20px;
      /* font-weight: bold; */
  }
  .divCenter{
      float:left;
      /* 这里减去的值是左右宽度 */
      width:calc(100% - 25% - 25%);
      padding-top: 80px;
  }
  table{
      color:#a6a6a6;
  }
  .tdLeft{
      width: 150px;
      height: 45px;
      text-align: right;
      padding-right: 45px;
  }
  .divRight{
      float:right;
      width:25%;
      padding-top: 20px;
      padding-right: 20px;
  }
  .divRight>p{
      font-size: 15px;
      color: #a6a6a6;
      text-align: right;
  }
  .divRight p a{
      color: pink;
  }
  /* 单独设置验证码图片 */
  #imgCode{
      height:32px;
      /* 垂直居中 */
      vertical-align: middle;
  }
  /* 表单中放置提交按钮的td */
  #tdSubmit{
      text-align: center;
  }
  #btnSubmit{
      width: 115px;
      height: 30px;
      background-color: #ffd026;
      border: 0px ;
      color: #a6a6a6;
      border-radius: 5px;
  }
  #username,#password,#checkCode,#email,#name,#phone,#date{
      width: 251px;
      height: 32px;
      border: 1px solid #a6a6a6;
      border-radius: 5px;
      padding-left: 10px;
  }
  #checkCode{
      width: 110px;
  }
</style>